<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../themes/index_template.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="title">
        Usuarios
    </ui:define>        
    <ui:define  name="content">

        <p:growl id="messages" life="3000" showDetail="true"/>
        <h:form>
            <p:panel header="Usuarios" style="width: 900px;">
                <h:panelGrid columns="6" cellpadding="5">
                    <p:outputLabel for="selectTipoBusqueda" value="Tipo de Busqueda: "/>
                    <p:selectOneMenu id="selectTipoBusqueda" value="#{accionesUsuario.tipoBusqueda}">
                        <f:selectItem itemLabel="Seleccione.." itemValue="#{null}"/>
                        <f:selectItem itemLabel="Nombre Usuario" itemValue="nombre"/>
                        <f:selectItem itemLabel="Id Usuario" itemValue="id"/>
                    </p:selectOneMenu>

                    <p:outputLabel for="valorBusqueda" value="Valor Busqueda"/>                    
                    <p:inputText id="valorBusqueda" required="true" 
                                 requiredMessage="Ingrese el valor de la busqueda"
                                 value="#{accionesUsuario.valorBusqueda}">
                        <f:validator validatorId="com.validator.lettersydigits"/>
                    </p:inputText>
                    <p:commandButton actionListener="#{accionesUsuario.findName}" 
                                     update=":messages,:formModificar:tableUsuarios" value="Buscar"/>
                    <p:commandButton update=":formCrearUsuario:crearUsuarioModal"   oncomplete="PF('crearUsuarioModal').show()" value="Crear"/>

                </h:panelGrid>
            </p:panel>
        </h:form>
        <h:form id="formCrearUsuario">
            <p:dialog header="Crear Usuario" id="crearUsuarioModal" 
                      widgetVar="crearUsuarioModal" showEffect="explode"
                      modal="true" hideEffect="bounce">
                <h:panelGrid columns="2" cellpadding="5">
                    <p:outputLabel for="idUSuarioCrear" value="Id USuario: "/>
                    <p:inputText maxlength="10" id="idUSuarioCrear" required="true" requiredMessage="Ingrese el id usuario" value="#{accionesUsuario.usuario.idUsuario}">
                        <f:validator validatorId="com.validator.digits"/>
                    </p:inputText>
                    <p:outputLabel for="nombreUsuarioCrear" value="Nombre Usuario: "/>
                    <p:inputText maxlength="40" id="nombreUsuarioCrear" required="true" requiredMessage="Ingrese el nombre" value="#{accionesUsuario.usuario.nombreUsuario}">
                        <f:validator validatorId="com.validator.lettersblank"/>
                    </p:inputText>
                    <p:outputLabel for="telefonoCrear" value="Telefono: "/>
                    <p:inputText maxlength="10" id="telefonoCrear" required="true" requiredMessage="Ingrese el telefono" value="#{accionesUsuario.usuario.telefono}">
                        <f:validator validatorId="com.validator.digits"/>
                    </p:inputText>
                    <p:outputLabel for="emailCrear" value="E-mail: "/>
                    <p:inputText maxlength="40" id="emailCrear" required="true" requiredMessage="Ingrese el email" value="#{accionesUsuario.usuario.email}">
                        <f:validator validatorId="com.validator.email"/>
                    </p:inputText>
                    <p:outputLabel  value="Tipo de Usuario: "/>
                    <p:selectOneMenu id="tipoUsuarioCrear" required="true" requiredMessage="Seleccione el tipo usuario" value="#{accionesUsuario.idTipoUsuario}">
                        <f:selectItem itemLabel="Seleccione.." itemValue=""/>
                        <f:selectItems value="#{accionesUsuario.listTipoUsuario}" var="tipo2" 
                                       itemLabel="#{tipo2.descripcion}" itemValue="#{tipo2.idTipoUsuario}"/>

                    </p:selectOneMenu>

                    <p:outputLabel for="perfilUsuarioCrear" value="Perfil Usuario"/>
                    <p:selectOneMenu id="perfilUsuarioCrear" required="true" requiredMessage="Seleccione el perfil de usuario" value="#{accionesUsuario.idPerfil}">
                        <f:selectItem itemLabel="Seleccione.." itemValue="#{null}"/>
                        <f:selectItems value="#{accionesUsuario.listPerfil}" var="perfil" 
                                       itemValue="#{perfil.idPerfil}" itemLabel="#{perfil.descripcion}"/>
                    </p:selectOneMenu>
                    <p:outputLabel for="idCiudadCrear" value="Id Ciudad: "/>
                    <p:selectOneMenu id="idCiudadCrear"  required="true" requiredMessage="Seleccione la ciudad" value="#{accionesUsuario.idCiudad}">
                        <f:selectItem itemLabel="Seleccione.." itemValue="#{null}"/>
                        <f:selectItems value="#{accionesUsuario.listCiudad}" var="ciudad"
                                       itemValue="#{ciudad.idCiudad}" itemLabel="#{ciudad.descripcion}"/>
                    </p:selectOneMenu>
                    <h:panelGroup/>
                    <f:facet name="footer">
                        <p:commandButton value="Crear" update=":messages" onsuccess="handleLoginRequest(xhr, status, data)" 
                                         actionListener="#{accionesUsuario.guardar}"/>
                    </f:facet>
                </h:panelGrid>

            </p:dialog>
        </h:form>
        <h:form id="formModificar">

            <p:dataTable id="tableUsuarios" value="#{accionesUsuario.listUsuario}" 
                         var="usuario" rendered="true">
                <p:column headerText="Id Usuario">
                    <h:outputText value="#{usuario.idUsuario}"/>
                </p:column>
                <p:column headerText="Nombre">
                    <h:outputText value="#{usuario.nombreUsuario}"/>
                </p:column>
                <p:column headerText="Email">
                    <h:outputText value="#{usuario.email}"/>
                </p:column>
                <p:column style="width:10%">  
                    <p:commandButton id="selectButton" update=":formModificar:modificarUsuarioPanel" oncomplete="PF('modificarUsuarioModal').show()" icon="ui-icon-pencil" title="Editar">  
                        <f:setPropertyActionListener value="#{usuario}" target="#{accionesUsuario.usuarioSelect}" />  
                    </p:commandButton>
                    <p:commandButton id="deleteBoton" update=":messages,:formModificar:tableUsuarios" actionListener="#{accionesUsuario.eliminar}"  icon="ui-icon-circle-close" title="Eiminar">  
                        <f:setPropertyActionListener value="#{usuario}" target="#{accionesUsuario.usuario}" />  
                    </p:commandButton>
                </p:column>
            </p:dataTable>
            <p:dialog id="modificarUsuarioPanel" header="Modificar Usuario" 
                      widgetVar="modificarUsuarioModal" showEffect="explode"
                      modal="true" hideEffect="bounce">                
                <h:panelGrid  columns="2" >
                    <p:outputLabel for="idUsuarioModificar" value="Id USuario: "/>
                    <p:outputLabel rendered="#{not empty accionesUsuario.usuarioSelect}" id="idUsuarioModificar"  value="#{accionesUsuario.usuarioSelect.idUsuario}"/>

                    <p:outputLabel for="nombreUsuarioModificar" value="Nombre Usuario: "/>
                    <p:inputText rendered="#{not empty accionesUsuario.usuarioSelect}"  maxlength="40" id="nombreUsuarioModificar" required="true" requiredMessage="Ingrese el nombre" value="#{accionesUsuario.usuarioSelect.nombreUsuario}">
                        <f:validator validatorId="com.validator.lettersblank"/>
                    </p:inputText>
                    <p:outputLabel for="telefonoModificar" value="Telefono: "/>
                    <p:inputText rendered="#{not empty accionesUsuario.usuarioSelect}" maxlength="10" id="telefonoModificar" required="true" requiredMessage="Ingrese el telefono" value="#{accionesUsuario.usuarioSelect.telefono}">
                        <f:validator validatorId="com.validator.digits"/>
                    </p:inputText>
                    <p:outputLabel for="emailModificar" value="E-mail: "/>
                    <p:inputText  rendered="#{not empty accionesUsuario.usuarioSelect}" maxlength="40" id="emailModificar" required="true" requiredMessage="Ingrese email" value="#{accionesUsuario.usuarioSelect.email}">
                        <f:validator validatorId="com.validator.email"/>
                    </p:inputText>
                    <p:outputLabel for="tipoUsuarioModificar" value="Tipo de Usuario: "/>
                    <p:selectOneMenu  rendered="#{not empty accionesUsuario.usuarioSelect}" id="tipoUsuarioModificar" required="true" requiredMessage="Seleccione el tipo usuario" value="#{accionesUsuario.usuarioSelect.idTipoUsuario.idTipoUsuario}">
                        <f:selectItem itemLabel="Seleccione.." itemValue="#{null}"/>
                        <f:selectItems value="#{accionesUsuario.listTipoUsuario}" var="tipo" 
                                       itemLabel="#{tipo.descripcion}" itemValue="#{tipo.idTipoUsuario}"/>
                    </p:selectOneMenu>
                    <p:outputLabel for="perfilUsuarioModificar" value="Perfil Usuario"/>
                    <p:selectOneMenu rendered="#{not empty accionesUsuario.usuarioSelect}" id="perfilUsuarioModificar" required="true" requiredMessage="Seleccione el perfil" value="#{accionesUsuario.usuarioSelect.perfilUsuario.idPerfil}">
                        <f:selectItem itemLabel="Seleccione.." itemValue="#{null}"/>
                        <f:selectItems value="#{accionesUsuario.listPerfil}" var="perfil" 
                                       itemValue="#{perfil.idPerfil}" itemLabel="#{perfil.descripcion}"/>
                    </p:selectOneMenu>
                    <p:outputLabel for="idCiudadModificar" value="Id Ciudad: "/>
                    <p:selectOneMenu rendered="#{not empty accionesUsuario.usuarioSelect}" id="idCiudadModificar"  required="true" requiredMessage="Seleccione  la ciudad" value="#{accionesUsuario.usuarioSelect.idCiudad.idCiudad}">
                        <f:selectItem itemLabel="Seleccione.." itemValue="#{null}"/>
                        <f:selectItems value="#{accionesUsuario.listCiudad}" var="ciudad"
                                       itemValue="#{ciudad.idCiudad}" itemLabel="#{ciudad.descripcion}"/>
                    </p:selectOneMenu>
                    <h:panelGroup/>
                    <f:facet name="footer">
                        <p:commandButton value="Modificar" update=":messages,:formModificar:tableUsuarios" onsuccess="handleLoginRequest(xhr, status, data)" 
                                         actionListener="#{accionesUsuario.modificar}" />
                    </f:facet>
                </h:panelGrid>

            </p:dialog>
        </h:form>
        <h:outputScript library="js">        
            function handleLoginRequest(xhr, status, args) {
                if (status != "success") {

                } else {
                    PF('crearUsuarioModal').hide();
                    PF('modificarUsuarioModal').hide();
                }
            }
        
        </h:outputScript>
         
    </ui:define>
</ui:composition>
